<template>
  <div>
    <el-form ref="form" :inline="true" label-width="100px" class="mt-20 searchbar-box clearfix evaluateManage-form">
      <template>
        <el-form-item label="课程">
          <el-input v-model="searchParams.courseTitle" placeholder=" 输入课程名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="评论人">
          <el-input v-model="searchParams.reviewerName" placeholder=" 输入评论人名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="searchParams.time"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="interSearch" size="small">查询</el-button>
        </el-form-item>
      </template>
    </el-form>
    <el-table :data="tableData" :empty-text="emptyText" v-loading="isLoading" element-loading-text="加载中..." stripe="stripe">
      <template v-for="(item, index) of tableColumn">
        <el-table-column
          :key="index + item.prop"
          :label="item.title"
          align="center"
          :show-overflow-tooltip="true"
          :min-width="item.minWidth"
          :width="item.width">
          <template slot-scope="scope">
            <span v-if="item.prop === 'updateTime'">{{ getTime(scope.row.updateTime) }}</span>
            <div v-else-if="item.prop==='operation'">
              <el-tooltip class="item" content="删除" placement="top-start">
                <svg-icon @click="handelDelete(scope.row)" class="can-click" icon-class="delete" />
              </el-tooltip>
            </div>
            <span v-else>{{scope.row[item.prop]}}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination
      class="mt-30"
      :current-page="searchParams.currentPage"
      :page-size="searchParams.pageSize"
      :total="total"
      layout="sizes, total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: 'evaluateManage',
    data () {
      return {
        isLoading: false,
        emptyText: '加载中...',
        tableColumn: [
          { title: '课程名称', prop: 'courseTitle', minWidth: '100', width: null },
          { title: '评论人', prop: 'reviewerName', minWidth: '', width: null },
          { title: '评论时间', prop: 'updateTime', minWidth: '', width: null },
          { title: '评论内容', prop: 'reviewContent', minWidth: '', width: null },
          { title: '操作', prop: 'operation', minWidth: '100', width: '' }
        ],
        tableData: [],
        total: 0,
        searchParams: {
          courseTitle: '', // 课程名称
          reviewerName: '', // 评论人姓名
          time: '',
          currentPage: 1,
          pageSize: 20
        },
        id: '',
      };
    },
    mounted () {
      this.getDataList();
    },
    methods: {
      /* 获取列表数据 */
      getDataList (currentPage) {
        this.isLoading = true;
        this.searchParams.currentPage = currentPage || 1;
        let param = {
          currentPage: this.searchParams.currentPage,
          pageSize: this.searchParams.pageSize,
          courseTitle: this.searchParams.courseTitle,
          reviewerName: this.searchParams.reviewerName,
          startTime: (this.searchParams.time && this.searchParams.time[0]) ? this.Moment(this.searchParams.time[0]).format('YYYY-MM-DD') + ' 00:00:00' : '',
          endTime: (this.searchParams.time && this.searchParams.time[1]) ? this.Moment(this.searchParams.time[1]).format('YYYY-MM-DD') + ' 23:59:59' : '',
        }
        this.$api.evaluate.courseEvaluate(param).then(res => {
          this.isLoading = false;
          this.total = res.total;
          this.tableData = res.data || [];
          this.emptyText = !this.tableData.length ? '暂无数据' : this.emptyText;
        });
      },
      /* 删除 */
      handelDelete (obj) {
        this.$confirm(`确定要删除吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.evaluate.evaluateDel({
            id: obj.id,
          }).then(() => {
            this.$message({
              type: 'success',
              message: `删除成功!`
            });
            this.getDataList()
          })
        }).catch(() => {
        });
      },
      handleCurrentChange (val) {
        this.searchParams.currentPage = val
        this.getDataList(val)
      },
      handleSizeChange (val) {
        this.searchParams.pageSize = val
        this.getDataList()
      },
      getTime(val){
        if(val){
          return this.Moment(val).format('YYYY-MM-DD HH:mm:ss')
        }else {
          return ''
        }
      },
      interSearch(){
        this.searchParams.currentPage = 1;
        this.getDataList(this.searchParams.currentPage)
      },
    }
  }
</script>
<style lang="scss" scoped>
  .evaluateManage-form{
    /deep/.el-form-item__content{
      line-height: 0;
    }
  }
</style>
